<template>
  <div class="knowledgeSrchMain">
    <!-- <span v-show="showType!==0" class="table-click-text rankings" @click="getRanking()">排行榜</span> -->
    <ContentWrap>
      <div class="cearch-area">
        <el-input ref="searchInput" v-model="keyWord" size="medium" clearable class="text_center" style="width:260px;margin-right:10px;" placeholder="查你所想" @keyup.enter.native="queryHandle" />
        <Button type="primary" :loading="loading" @click="queryHandle">查询</Button>
        <Button v-if="showType===1" type="primary" @click="getRanking()">排行榜</Button>
      </div>
      <el-row v-show="showType===0" :gutter="20">
        <el-col :span="8">
          <Card title="最新知识" show-shadow header-class-name="titleBg">
            <div class="conent-bg">
              <!-- <h5 class="content-title">最新知识</h5> -->
              <el-table
                row-key="t_index"
                height="calc(100vh - 250px)"
                :data="news"
                no-request
                header-row-class-name="table-list-header"
              >
                <el-table-column prop="title" label="知识标题">
                  <template slot-scope="scope">
                    <span class="table-click-text" @click="detail(scope.row)">{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createrName" label="创建人">
                  <template slot-scope="scope">
                    <span>{{ scope.row.createrName+'('+scope.row.createBy+')' }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间"></el-table-column>
              </el-table>
            </div>
          </Card>
        </el-col>
        <el-col :span="8">
          <Card title="最热知识" show-shadow header-class-name="titleBg">
            <div class="conent-bg">
              <!-- <h5 class="content-title">最热知识</h5> -->
              <el-table
                row-key="t_index"
                height="calc(100vh - 250px)"
                :data="hots"
                no-request
                header-row-class-name="table-list-header"
              >
                <el-table-column prop="title" label="知识标题">
                  <template slot-scope="scope">
                    <span class="table-click-text" @click="detail(scope.row)">{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createrName" label="创建人">
                  <template slot-scope="scope">
                    <span>{{ scope.row.createrName+'('+scope.row.createBy+')' }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间"></el-table-column>
              </el-table>
            </div>
          </Card>
        </el-col>
        <el-col :span="8">
          <Card title="最近查询" show-shadow header-class-name="titleBg">
            <div class="conent-bg">
              <!-- <h5 class="content-title">最近查询</h5> -->
              <el-table
                row-key="t_index"
                height="calc(100vh - 250px)"
                :data="latelys"
                no-request
                header-row-class-name="table-list-header"
              >
                <el-table-column prop="title" label="知识标题">
                  <template slot-scope="scope">
                    <span class="table-click-text" @click="detail(scope.row)">{{ scope.row.title }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createrName" label="创建人">
                  <template slot-scope="scope">
                    <span>{{ scope.row.createrName+'('+scope.row.createBy+')' }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="发布时间"></el-table-column>
              </el-table>
            </div>
          </Card>
        </el-col>
      </el-row>
      <el-row v-show="showType===1" :gutter="20">
        <div class="query-result">
          <!-- <h5 class="content-title">查询结果</h5> -->
          <div class="table-list-box">
            <el-table
              row-key="t_index"
              height="calc(100vh - 250px)"
              :data="list"
              no-request
              header-row-class-name="table-list-header"
            >
              <el-table-column prop="title" label="知识标题">
                <template slot-scope="scope">
                  <span class="table-click-text" @click="detail(scope.row)">{{ scope.row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createrName" label="创建人">
                <template slot-scope="scope">
                  <span>{{ scope.row.createrName+'('+scope.row.createBy+')' }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="发布时间"></el-table-column>
            </el-table>
          </div>
        </div>
      </el-row>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Button from '@/components/Button'
import Card from '@/components/Card'
import { rankingList, queryKnowledge } from '@/api/knowledgeBase'
export default {
  name: 'KnowledgeSearchMain',
  components: {
    ContentWrap,
    Button,
    Card
  },
  props: {
    isCreateOrder: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      keyWord: '',
      showType: 0,
      news: [],
      hots: [],
      latelys: [],
      list: [],
      knowledgeDetail: {},
      tableConfig: {
        interfacePath: '',
        pageFlag: false,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: []
      }
    }
  },
  activated() {
    this.getRanking()
  },
  methods: {
    getRanking() {
      this.showType = 0
      rankingList().then(res => {
        if (res.success === 1) {
          this.news = res.data.latestKnowledge
          this.hots = res.data.hotSearch
          this.latelys = res.data.recentSearch ? res.data.recentSearch : []
        }
      })
    },
    // 根据条件查询
    queryHandle() {
      this.$refs.searchInput.blur()
      this.loading = true
      queryKnowledge(this.keyWord)
        .then(res => {
          this.loading = false
          this.list = res.data
          this.showType = 1
        })
        .catch(er => {
          this.loading = false
        })
    },
    // 详情
    detail(row) {
      if (this.isCreateOrder) {
        this.$emit('click', row.id)
      } else {
        this.$router.push({ name: 'KnowledgeContentDetail', query: { id: row.id }})
      }
    },
    // 前往发送短信，需携带正文
    sendSms() {
      this.$router.push({ name: 'SMSSend', query: { content: this.knowledgeDetail.content }})
    }
  }
}
</script>
<style lang="scss" scoped>
.knowledgeSrchMain{
  position: relative;
  .rankings{
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
.cearch-area {
  // width: 340px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px auto 30px;
}
.conent-bg {
  background: #f0ebeb;
  margin: 0 -10px;
  margin-top: -10px;
  h5 {
    background: #0d8e58;
    margin: 0;
    line-height: 27px;
    padding-left: 10px;
    color: #fff;
  }
}
.detail_container{
  >h2,>p{
    margin: 0;
    text-align: center;
  }
  >p{
    margin: 12px;
    color: #999;
  }
  .cTime{
    text-align: right;
  }
  .detail_msg{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 12px;
    span{
      margin-right: 30px;
    }
    .sendSms{
      margin: 0;
      color: #16BC83;
      cursor: pointer;
    }
  }
  .detail_content{
    padding: 20px 0;
  }
}
.query-result{
  width: 100%;
  padding: 0 10px;
}
</style>
<style lang="scss">
.titleBg{
  padding: 10px !important;
  margin-top: -5px;
  background: #0d8e58;
  & [class*="el-badge"]{
    &>span{
      color: #fff !important;
    }
  }
}
</style>
